<style include="diagnostics-shared">
:host-context(body.jelly-enabled) .tester {
  background: var(--cros-highlight-color_shape);
}

.canvas-container {
  align-items: center;
  display: flex;
  justify-content: center;
}

.tester {
  background: var(--cros-highlight-color);
  border-radius: 8px;
}

</style>
<cr-dialog id="touchpadTesterDialog">
  <div slot="title">[[i18n('touchpadTesterTitleText')]]</div>
  <div slot="body">
    [[touchpad.name]]
    <div class="canvas-container">
      <!-- TODO(b/253021171): Set width dynamically based on constant height
        ratio compared to ABS size data provided from EvdevDeviceInfo when
        mojo is updated to provide scaled size. -->
      <canvas class="tester" id="testerCanvas" height="320" width="320" ></canvas>
    </div>
  </div>
</cr-dialog>
